<template>
  <xl-login ref="loginchild" @clk="getBase"></xl-login>
  <view class="maind" :style="`height:${heightDom.page}px`">
    <view class="lid">
      <view :class="[cur==0?'cur':'']" class="c" @click="cur=0">省直机构</view>
      <view :class="[cur==1?'cur':'']" class="c" @click="cur=1">地方领导</view>
    </view>
    <view v-if="cur==0" class="shengBox" :style="`height:${heightDom.select}px`">
      <scroll-view :scroll-y="true" :style="`height:100%;border: 1px solid #ddd;flex:1`">
        <view v-for="(item,idx) in shengzhi" :class="['sz',lid==item.pid?'cur':'']" @click="checkLid(item.pid,99999)">
          {{ item.p_name }}
        </view>
      </scroll-view>
    </view>
    <view v-if="cur==1" class="shengBox" :style="`height:${heightDom.select}px`">
      <view class="cityMain" @click="starCheckCity">
        <view class="label" style="color:#666;width: 40%;text-align: left">选择市（州）</view>
        <view class="label" style="text-align: center;width:60%;display: flex;align-content: center">
          {{ citys[cityid]?.c_name }}
          <view style="margin-left:30rpx;display: flex;align-content: center">
            <uv-icon name="arrow-down" color="#000" size="14"/>
          </view>
        </view>
        <view :class="['citylist',starCheckCityStatus?'flex':'']">
          <view class="cityBox" v-for="(item,idx) in citys" @click="checkcityid(item.cid)">{{ item.c_name }}</view>
        </view>
      </view>
      <scroll-view :scroll-y="true"
                   :style="`height:calc(${heightDom.select}px - 55px);border: 1px solid #ddd;flex:1;width:auto;`">
        <view v-for="(item,idx) in cityschirld" :class="['sz',lid==item.pid?'cur':'']"
              @click="checkLid(item.pid,item.p_type3)">
          {{ item.p_content }}
        </view>
      </scroll-view>
    </view>
    <view class="checkOtherCity">
      事发地域：
      <picker :value="0" :range="dyCity" mode="selector" range-key="c_name" @change="checkDy1">
        <view class="dy">{{ dyData.dy1 >= 0 ? dyCity[dyData.dy1].c_name : '请选择城市' }}
          <uv-icon name="arrow-down" color="#fff" size="14"/>
        </view>
      </picker>
      <picker :value="0" :range="dyCity[dyData.dy1]?.child" mode="selector" range-key="c_name"
              style="margin-left:30rpx;" @change="checkDy2" v-if="p3!='00'">
        <view class="dy">{{ dyData.dy2 >= 0 ? dyCity[dyData.dy1]?.child[dyData.dy2].c_name : '请选择区县' }}
          <uv-icon name="arrow-down" color="#fff" size="14"/>
        </view>
      </picker>
    </view>
    <view class="next" style="margin:0 40rpx 60rpx 40rpx">
      <uv-button type="primary" text="下一步" style="flex:1" :disabled="nextDisabled" @click="next"
                 size="large"></uv-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  getCitysData,
  getLeaderCitys,
  doCreateThread
} from "../../common/api";
import {onLoad, onShow} from '@dcloudio/uni-app'
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  watch
} from 'vue'
import {
  postProps
} from "@/stores/post";
import {
  useToken
} from "@/stores/userStores";

const userToken = useToken();
const postparms = postProps();
const shengzhi = ref([]);
const citys = ref([]);
const cityschirld = ref([]);
const cur = ref(0)
const tabheight = ref(null);
const starCheckCityStatus = ref(false)
const picker = ref(null)
const dyData = reactive({
  dy1: '-1',
  dy2: '-1'
})
const loginchild = ref(null)
const heightDom = reactive({
  page: 0,
  lid: 0,
  next: 0,
  select: 0
})
const lock = ref(false)
const checkDy1 = (e) => {
  dyData.dy1 = e.detail.value
  dyData.dy2 = '-1'
  lock.value = true
}
const checkDy2 = (e) => {
  dyData.dy2 = e.detail.value
  lock.value = true
}
const openPicker = () => {
  picker.value.open();
}
const p3 = ref('99999')
const nextDisabled = ref(true)
const lid = ref(0)
const checkLid = (pid, p) => {
  lid.value = pid
  if (cur.value == 1 && lock.value === false) {
    p3.value = p
    let c = dyCity.value[dyData.dy1].child.findIndex(item => (item.c_type3 === p));
    dyData.dy2 = c
  }
}
const next = () => {
  let dy2check
  if (p3.value == '00') {
    dy2check = 0
    if (dyData.dy1 < 0) {
      uni.showToast({
        title: '请选择事发地',
        icon: 'none'
      })
      return false
    }
  } else {
    if (dyData.dy1 < 0 || dyData.dy2 < 0) {
      uni.showToast({
        title: '请选择事发地',
        icon: 'none'
      })
      return false
    }
    dy2check = dyCity.value[dyData.dy1].child[dyData.dy2].cid
  }
  postparms.set(lid.value, dyCity.value[dyData.dy1].cid, dy2check)
  if (lid.value > 1000) {
    let _ky = shengzhi.value.findIndex(item => item.pid === lid.value);
    postparms.setLeaderName(shengzhi.value[_ky].p_name)
  } else {
    let _ky = citys.value[cityid.value].child.findIndex(item => item.pid === lid.value);
    console.log(citys.value[cityid.value].c_name)
    postparms.setLeaderName(citys.value[cityid.value].c_name + '/' + citys.value[cityid.value].child[_ky].p_content)
  }
  uni.navigateTo({
    url: '/pages/thread/post2'
  })
  // console.log(dyCity.value[dyData.dy1].cid)

}
const columns = reactive({
  city: [],
  city2: []
})
const cityid = ref(0)
onMounted(async () => {
  await nextTick()
  const res = uni.getSystemInfoSync();
  heightDom.page = (res.windowHeight - 16);
  uni.createSelectorQuery().select('.next').boundingClientRect(data => {
    heightDom.next = data.height
  }).exec()
  uni.createSelectorQuery().select('.lid').boundingClientRect(data => {
    heightDom.lid = data.height
  }).exec()
  heightDom.select = (heightDom.page) - parseInt(heightDom.lid) - parseInt(heightDom.next) - 200
})
const dyCity = ref([])
import {setStorageSync, getStorageSync} from '@/util/cache'

const getBase = async () => {
  uni.showLoading()
  let postBaseCacheData_city = await getStorageSync('postBaseCacheData_city');
  if (postBaseCacheData_city) {
    dyCity.value = postBaseCacheData_city
  } else {
    await getCitysData().then(r => {
      dyCity.value = r.data
      setStorageSync('postBaseCacheData_city', dyCity.value, 86400)
    })
  }
  let postBaseCacheData_leader = await getStorageSync('postBaseCacheData_leader');
  if (postBaseCacheData_leader) {
    shengzhi.value = postBaseCacheData_leader.shengzhi
    citys.value = postBaseCacheData_leader.citys
    cityschirld.value = postBaseCacheData_leader.citys[0].child
    if (cur.value == 0) {
      columns.city = postBaseCacheData_leader.citys
    }
  } else {
    await getLeaderCitys().then(r => {
      setStorageSync('postBaseCacheData_leader', r.data, 86400)
      shengzhi.value = r.data.shengzhi
      citys.value = r.data.citys
      cityschirld.value = r.data.citys[0].child
      if (cur.value == 0) {
        columns.city = r.data.citys
      }
    })
  }

  // await getLeaderCitys().then(r => {
  //   shengzhi.value = r.data.shengzhi
  //   citys.value = r.data.citys
  //   cityschirld.value = r.data.citys[0].child
  //   if (cur == 0) {
  //     columns.city = r.data.citys
  //   }
  // })
  // setStorageSync('postBaseCacheData', {dyCity: dyCity.value, columns: columns.city}, 5000)
  uni.hideLoading()

}

onShow(() => {
  if (!userToken.token) {
    nextTick(() => {
      loginchild.value.openBox()
    })
  }
})

if (userToken.token) {
  getBase()
} else {
  //调用子组件
  nextTick(() => {
    loginchild.value.openBox()
  })
}


const starCheckCity = () => {
  starCheckCityStatus.value = !starCheckCityStatus.value
}
const checkcityid = (cid) => {
  //根据cID查找key
  cityid.value = citys.value.findIndex(item => item.cid === cid);
  cityschirld.value = citys.value[cityid.value].child
  let dy1 = dyCity.value.findIndex(item => item.cid === cid);
  dyData.dy1 = dy1
  dyData.dy2 = '-1'
  lock.value = false
}
//获取class=lid的高度
//监听lid
watch(lid, (newValue, oldValue) => {
  if (newValue) {
    nextDisabled.value = false
  }
})
watch(cur, (newValue, oldValue) => {
  if (newValue == 1) {
    if (dyData.dy1 < 1) {
      dyData.dy1 = '0'
      p3.value = '9999'
    }
  }
  lid.value = 0
})

</script>


<style scoped lang="scss">
.dy {
  background: #3e90b9;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 18rpx;
  color: #fff;
  border-radius: 6rpx;
  display: flex;
  align-content: center;
}

.checkOtherCity {
  height: 90rpx;
  line-height: 90rpx;
  margin: 20rpx 40rpx;
  display: flex;
  align-items: center;
}

.cityMain {
  border: 1px solid #ddd;
  height: 80rpx;
  flex: 1;
  display: flex;
  padding-left: 30rpx;
  line-height: 80rpx;
  margin-bottom: 30rpx;
  position: relative;

  .citylist {
    position: absolute;
    flex-wrap: wrap;
    top: 80rpx;
    display: none;
    z-index: 9999;
    border: 1px solid #ddd;
    flex: 1;
    background: #fff;
    left: 0;

    &.flex {
      display: flex;
    }

    .cityBox {
      padding: 4rpx;
      background: #efefef;
      margin: 5rpx;
      font-size: 26rpx;
      text-align: center;
      width: calc(25% - 22rpx);
    }
  }
}

.maind {
  display: flex;
  margin-top: 30rpx;
  background: #fff;
  flex-direction: column;

  .shengBox {
    border-radius: 10rpx;

    margin: 0 40rpx;
    background: #fff;

    .sz {
      padding: 18rpx;

      &.cur {
        background: #ecf1f5;
      }
    }
  }
}

.lid {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0 30rpx 0;
  background: #fff;

  .c {
    width: 20%;
    text-align: center;
  }

  .cur {
    color: $baseColor;
    border-bottom: 2px solid $baseColor;
    padding-bottom: 15rpx;
  }
}
</style>
